<template>
  <div class="top-header">
    <div class="left" @click="back">
      <slot name="left">
        <span class="iconfont iconshouqi"></span>
      </slot>
    </div>

    <div class="title">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="right">
      <slot name="right"></slot>
      <!-- <div onClick="javascript:location.reload();">刷新</div> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({
  name: "TopHeader",
  components: {}
})
export default class TopHeader extends Vue {
  @Prop() leftClick!: Function;
  private back() {
    if (this.leftClick !== void 0) {
      if (typeof this.leftClick === "function") {
        this.leftClick();
      }
    }
  }

  get title() {
    return (this as any).$route.meta.title;
  }
}
</script>

<style lang="less" scoped>
.top-header {
  height: 44px;
  background: linear-gradient(90deg, #6dc1fc, #5c9afa);
  padding-right: 12px;
  display: flex;
  justify-content: space-between;
  color: white;
  position: relative;

  .left {
    display: flex;
    height: 100%;
    justify-content: start;
    align-items: center;
    padding-left: 8px;
    padding-right: 12px;
  }

  .iconshouqi {
    display: block;
    transform: rotate(90deg);
  }

  .right {
    display: flex;
    align-items: center;
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
  }
}
</style>
